Skip to content

feat(examples-chat): welcome suggestions — 3 chips + overflow dropdown#383

Merged
blove merged 8 commits into
mainfrom
claude/welcome-suggestions-overflow-dropdown
May 17, 2026
Merged

feat(examples-chat): welcome suggestions — 3 chips + overflow dropdown#383
blove merged 8 commits into
mainfrom
claude/welcome-suggestions-overflow-dropdown

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 17, 2026

Summary

Reduces the canonical demo's welcome state from 17 stacked suggestion chips to 3 curated chips + 1 "More prompts" dropdown. Each chip in the trio exercises a distinct capability path: markdown streaming, tool use with citations, GenUI surface render. The dropdown uses the same `chat-select` primitive that backs the model picker pill, so it visually matches.

Why

The previous welcome state occupied ~360px vertical at the bottom of the page and put 17 prompts on equal footing. A first-time visitor at https://demo.cacheplane.ai/embed saw a wall of options instead of a focused experience. Flagged by user on the production demo after the v0.0.35 chrome restoration.

How

Pure demo-side composition. No `@ngaf/chat` API changes, no release needed.

  1. Split flat `WELCOME_SUGGESTIONS` const into `FEATURED_SUGGESTIONS` (3) + `MORE_SUGGESTIONS` (14). Keep `WELCOME_SUGGESTIONS` re-export for back-compat.
  2. Add `WelcomeSuggestionsComponent` (`examples/chat/angular/src/app/modes/`) composing `` × 3 + `<chat-select placeholder="More prompts">` × 1.
  3. Three mode components (embed/popup/sidebar) each replace their `@for` block with one `<welcome-suggestions chatWelcomeSuggestions (selected)="send($event)" />` element.

Behavior

User action Result
Click a chip `(selected)` fires → `send($event)` → first message sent (auto-send, unchanged from before)
Pick from dropdown Same path — auto-send
Click outside dropdown Popover closes; welcome state unchanged

Test plan

  • 5 new vitest cases in `welcome-suggestions.component.spec.ts`: chip count, chip labels, dropdown placeholder, options-array shape, chip-click emits `(selected)`
  • `npx nx build examples-chat-angular` succeeds
  • `npx nx lint examples-chat-angular` passes
  • Full vitest demo suite: 16/16 pass (4 test files)
  • CI green
  • Post-merge: demo.cacheplane.ai/embed shows 3 chips + dropdown (the diff touches examples/chat/angular which sets demo_changed=true → Vercel auto-deploy)

Out of scope

  • Adding to `libs/chat` as a public primitive (one consumer today; promote if a second consumer needs it)
  • Search/filter inside the dropdown (14 items don't need it)
  • Categorization (group by markdown/GenUI/tool-use) — could add later if the list grows
  • Reordering MORE_SUGGESTIONS

Spec: `docs/superpowers/specs/2026-05-16-welcome-suggestions-overflow-dropdown-design.md`
Plan: `docs/superpowers/plans/2026-05-16-welcome-suggestions-overflow-dropdown.md`

🤖 Generated with Claude Code

blove and others added 6 commits May 16, 2026 18:58
Reduces the demo's welcome-state visual footprint from 17 stacked
chips to 3 curated chips + a "More prompts" dropdown styled like the
existing model picker. Pure demo-side composition reusing chat-welcome-
suggestion + chat-select primitives; no @ngaf/chat API changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
6 tasks: split data, build component+spec, migrate embed/popup/sidebar
modes, verify+PR. Demo-side only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… dropdown

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cacheplane Ready Ready Preview, Comment May 17, 2026 2:13am

Request Review

@blove blove force-pushed the claude/welcome-suggestions-overflow-dropdown branch from acad99d to c9d8f2e Compare May 17, 2026 02:09
blove and others added 2 commits May 16, 2026 19:11
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Same class of drift as PR #377: someone landed a chat-lib public API
change on main without regenerating apps/website/content/docs/chat/
api/api-docs.json. Caught here because CI's Verify generated API
docs are committed step fails on the stale file. Regenerated via
npm run generate-api-docs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@blove blove force-pushed the claude/welcome-suggestions-overflow-dropdown branch from c9d8f2e to 4ea9ef5 Compare May 17, 2026 02:11
@blove blove merged commit 7c44813 into main May 17, 2026
29 of 30 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant